// import Admin from '@/pages/Admin'
import Cart from '@/pages/Cart'
import Detail from '@/pages/Detail'
import Edit from '@/pages/admin/Edit'
import HelloWorld from '@/components/HelloWorld'
import Home from '@/pages/Home'
import Index from '@/pages/admin/Index'
import New from '@/pages/admin/New'
import Products from '@/pages/admin/Products'
import Router from 'vue-router'
import Vue from 'vue'

// 这里我们可以看到导出 HelloWorld 组件时，我们在路径最前面加上了 "@"，那是因为我们在 webpack 配置中将会 "@"
// 映射成 resolve('src')，也就是我们项目目录下 src 文件夹的路径，最后我们的 '@/components/HelloWorld' 的实际上的效果相当于取到了项目目录 src 文件夹里面的 components/HelloWorld 组件。
// 路由文件
// 告诉 Vue，我们应用接入了路由。
Vue.use(Router)

export default new Router({
    // 通过 routes 数组定义了项目所有的页面，每个页面是一个类似 { path, name, component } 的对象
    // 比如初始化时生成的 HelloWorld.vue 就是我们的网站首页 -- 也就是打开浏览器访问到的第一个页面，因为它的路径（path）定义为 / 。此外一个页面定义还需要 name，它代表此页面在 vue-router 中的标识符，component 则代表此页面渲染时的所用到的组件。
    routes: [
        {
            path: '/helloWorld',
            name: 'HelloWorld',
            component: HelloWorld
        },
        {
            path: '/',
            name: 'Home',
            component: Home
        },
        {
            path: '/admin',
            name: 'Admin',
            component: Index,
            children: [
                {
                    path: 'new',
                    name: 'New',
                    component: New
                },
                {
                    path: 'edit/:id',
                    name: 'Edit',
                    component: Edit
                },
                {
                    path: '',
                    name: 'Products',
                    component: Products
                }
            ]
        },
        {
            path: '/cart',
            name: 'Cart',
            component: Cart
        },
        {
            path: '/detail/:id',
            name: 'Detail',
            component: Detail
        }
    ]
})
